<template>
  <div class="date-filter"  @click.stop>
    <div class="filter__text">日期</div>
    <div class="date-container">
      <select class="condition-selector" v-model="condition" @change="handleSelectChange">
        <option class="option-item" v-for="option in options" :key="option.value" :value="option.value">
          {{option.text}}
        </option>
      </select>
      <a-date-picker size="small" show-time v-model="dateVal" @change="handleDateChange" />
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'DateFilter',
  props: {
    field: {
      type: String
    }
  },
  data() {
    return {
      dateVal: '',
      condition: '',
      options: [
          {
            text: '=',
            value: 'eq'
          },
          {
            text: '>=',
            value: 'ge'
          },
          {
            text: '<=',
            value: 'le'
          },
          {
            text: '<>',
            value: 'ne'
          },
          {
            text: 'like',
            value: 'like'
          }
        ],
    }
  },
  methods: {
    clearData() {
      this.dateVal = '';
      this.condition = '';
    },
    handleSelectChange() {
      this.handleEmitEvent()
    },
    handleDateChange() {
      this.handleEmitEvent()
    },
    handleEmitEvent(){
      let dateStr = moment(this.dateVal).format('YYYY-MM-DD HH:mm:ss');
      this.$emit('filterChange', {
        dictCode: '',
        field: this.field,
        type: "date",
        rule: this.condition,
        val: dateStr
      })
    },
  }
}
</script>

<style>
.date-filter {
  display: flex;
}
.filter__text {
  padding-right: 5px;
  white-space: nowrap;
}
.date-container {
  flex-grow: 1;
  display: flex;
}
.condition-selector {
  width: 50px;
  outline: none;
  border: 1px solid #aaa;
  margin-right: 5px;
}
.date-input {
  width: 100%;
}
</style>